ShowTable of Contents
XPagesでラジオボタンを使用したい場合には、「ラジオボタン」コントロールもしくは「ラジオボタングループ」コントロールがデフォルトで利用可能です。
どちらのコントロールを利用した場合でも、サーバーサイドJavaScriptで選択値を取得・設定することができます。
以下、2つのケースについてそれぞれまとめます。「ラジオボタン」コントロールを使った場合は少し注意が必要です。
ラジオボタングループの場合
例として、以下のような3つの選択肢を持つラジオボタングループを考えます。
ソースは以下です。
<xp:radioGroup id="radioGroup1">
<xp:selectItem itemLabel="One" itemValue="1"></xp:selectItem>
<xp:selectItem itemLabel="Two" itemValue="2"></xp:selectItem>
<xp:selectItem itemLabel="Three" itemValue="3"></xp:selectItem>
</xp:radioGroup>
選択値の取得：getValue
選択されているラジオボタンの値は、このラジオボタングループのオブジェクトの getValue() メソッドで取得できます。
getComponent("radioGroup1").getValue();
例えば以下のボタンを追加すると、ボタンを押した際に選択値がコンソールに出力されます。
<xp:button value="更新" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
<xp:this.action><![CDATA[#{javascript:print(getComponent("radioGroup1").getValue());}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
選択値の設定：setValue
選択したいラジオボタンの値を設定する場合には、このラジオボタングループのオブジェクトの setValue(value) メソッドを使用します。
getComponent("radioGroup1").setValue("2"); // Two が選択
getComponent("radioGroup1").setValue(null); // 選択なし（リセット）
例えば以下のボタンを追加すると、ボタンを押した際にラジオボタンの選択がリセットされます。
<xp:button value="リセット" id="button2">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
<xp:this.action><![CDATA[#{javascript:getComponent("radioGroup1").setValue(null);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
ラジオボタンの場合
先ほどのラジオボタングループの例と同じサンプルをラジオボタンで以下のように作成します。
ソースは以下です。
<xp:radio text="One" id="radio1" groupName="group1" selectedValue="1"></xp:radio>
<xp:radio text="Two" id="radio2" groupName="group1" selectedValue="2"></xp:radio>
<xp:radio text="Three" id="radio3" groupName="group1" selectedValue="3"></xp:radio>
選択値の取得：getValue
ラジオボタングループの場合はオブジェクトが1つだったため、そのgetValueを呼べば値を取得できるというのは非常に直感的でした。
しかし、ラジオボタンコントロールを使用した場合には、選択肢の数だけオブジェクトがあるため、どのオブジェクトの getValue を呼べば値がとれるのかがはっきりしません。
どのオブジェクトの getValue を呼べばいいのでしょうか？
実はこの場合は、どのラジオボタンのオブジェクトの getValue() を呼んでもすべて選択されているラジオボタンの値が取得できます。
// "Three" を選択している場合
getComponent("radiop1").getValue(); // "3" が返る
getComponent("radiop2").getValue(); // "3" が返る
getComponent("radiop3").getValue(); // "3" が返る
"One"や"Two"のラジオボタンの getValue() を呼んでも "3" が返ってくるのは少し不思議な感じがするかもしれません。
あくまで getValue() は選択値が返ってくることに注意しましょう。
選択値の設定：setValue
逆に選択したいラジオボタンの値を設定する場合には、どのラジオボタンのオブジェクトに setValue(value) すればいいのでしょうか？
先ほどの getValue の際と同様、どのラジオボタンのオブジェクトでも有効なのでしょうか？
実は、setValue の場合は、現在選択されているラジオボタンのオブジェクトに対して setValue を呼ばないと、選択値に反映されません。
// "Three" を選択している状態から、何も選択していない状態にリセットしたい場合
getComponent("radiop1").setValue(null); // × 無効（変化なし）
getComponent("radiop2").setValue(null); // × 無効（変化なし）
getComponent("radiop3").setValue(null); // ○ 有効
もっと簡単な方法は？
選択されているラジオボタンオブジェクトの setValue を呼ばなければならないのは少し面倒です。
もっと簡単な方法は、データバインドを利用する方法です。
例えば先ほどの例で、すべてのラジオボタンを radio というセッション変数（sessionScope.radio）にバインドしてみます。
<xp:radio text="One" id="radio1" groupName="group1" selectedValue="1" value="#{sessionScope.radio}></xp:radio>
<xp:radio text="Two" id="radio2" groupName="group1" selectedValue="2" value="#{sessionScope.radio}></xp:radio>
<xp:radio text="Three" id="radio3" groupName="group1" selectedValue="3" value="#{sessionScope.radio}></xp:radio>
この場合には、値の取得や設定はどちらも sessionScope.radio という変数に対して行えばよくなります。
// 選択値の取得
print(sessionScope.radio);
// 何も選択していない状態にリセットしたい場合
sessionScope.radio = null; // どれを選択している状態でもこのコードのみでOK
こうすれば、どのラジオボタンが選択されているかを知る必要がないので、処理が簡単になります。
ラジオボタングループの場合もデータバインドは使用できるので、処理を共通化できるというのも利点の１つです。